<template>

<!--  <div ref="vantaRef" class="background_bottom"></div>-->
  <WebSocketHandle></WebSocketHandle>
  <!-- <NavBar></NavBar> -->
  <router-view></router-view>


</template>

<script>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap";
import WebSocketHandle from "@/components/WebSocketHandle.vue";
// import * as THREE from 'three'
// import CLOUDS from 'vanta/src/vanta.clouds'
import {onUnmounted} from "vue";
import store from "@/store";
// import NavBar from "./components/NavBar.vue";
export default {
  components: {
    WebSocketHandle
    // NavBar,
  },

  setup() {

    onUnmounted(() => {//关闭后进行的操作
      if(store.state.websocket.socket){
        console.log("socket关了");
        store.state.websocket.socket.close();
      }
      // socket.close();
      // store.commit("updateStatus", "matching");
    });
    //主入口，不過目前沒什麽用
  },

  data() {
    return {};
  },
  // mounted() {
  //   this.vantaEffect = CLOUDS({
  //     el: this.$refs.vantaRef,
  //     THREE: THREE,
  //     mouseControls: true,
  //     touchControls: true,
  //     gyroControls: false,
  //     minHeight: 200.0,
  //     minWidth: 200.0,
  //     skyColor: 0x26b9f2,
  //     cloudColor: 0xb7c9e8,
  //     cloudShadowColor: 0x2f3a48,
  //     sunColor: 0x5c452f,
  //     sunGlareColor: 0xd4a798,
  //     sunlightColor: 0xdc9c59,
  //     speed: 1.2,
  //
  //   });
  //
  // },
  // beforeUnmount() {
  //   if (this.vantaEffect) {
  //     this.vantaEffect.destroy();
  //   }
  // },
};
</script>

<style>
html,
body {
  /*background-image: url("@/assets/image/backgroundimg.jpg");*/
  background-size: 40ch;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.background_bottom{
  position: absolute; /* 使 div 脱离文档流 */
  width: 100%;
  height: 100vh;
  z-index: -1; /* 设置为负值，确保在最底层 */
}
</style>
